<template>
  <a-form-item
    :label="configCascader.corporateName"
    :rules="[
      { required: configCascader.corporateRquired, message: `${configCascader.corporateName}必填` },
    ]"
    :label-col-flex="configCascader.corporateNameLabelWidth"
    :field="configCascader.fields"
  >
    <a-cascader
      key="corporate"
      :options="pageData.corporateList"
      @change="corporateChange"
      v-model="pageData.corporateId"
      allow-clear
      class="bacClass"
      ref="corporateRef"
      :style="{ width: configCascader.corporateWidth }"
      :size="configCascader.size"
      :loading="pageData.corporateLoading"
      :disabled="corporateDisabled"
      popup-container="html"
    />
  </a-form-item>
  <a-form-item
    v-if="configCascader.cascaderShow !== 'sector'"
    :label="configCascader.sectorName"
    :rules="[
      { required: configCascader.sectorRquired, message: `${configCascader.corporateName}必填` },
    ]"
    :label-col-flex="configCascader.sectorLabelWidth"
  >
    <a-cascader
      key="sector"
      v-model="pageData.sectorId"
      :options="pageData.sectorList"
      allow-clear
      :disabled="!pageData.corporateId"
      ref="sectorRef"
      :size="configCascader.size"
      :class="{
        bacClass: !(pageData.corporateId == null || pageData.corporateId == ''),
      }"
      :style="{ width: configCascader.sectorWidth }"
      @change="sectorChange"
      :loading="pageData.sectorLoading"
      popup-container="html"
    />
  </a-form-item>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted,onBeforeMount } from 'vue'
import { post } from '@/api/http'
import { Message } from '@arco-design/web-vue'
import { slicing } from '@/utils/caseFrimAndSecRig'
// ts写法
interface CascaderInf {
  corporateWidth: string
  sectorWidth: string
  corporateRquired: boolean
  sectorRquired: boolean
  size: string
  corporateName: string
  sectorName: string
  cascaderShow?: string
  defaultCorporateVal:number
}
const props = withDefaults(
  defineProps<{
    configCascader: CascaderInf | any
  }>(),
  {
    configCascader: {
      corporateWidth: '200px', //公司宽度
      sectorWidth: '200px', //部门宽度
      corporateRquired: true, //公司是否必填
      sectorRquired: true, //部门是否必填
      size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
      corporateName: '采购公司', //公司label
      sectorName: '采购部门', //部门label
      cascaderShow: '', //选择框不显示配置默认为空，sector|corporate，当前需求展示只支持部门不显示
      corporateNameLabelWidth: '', //选择公司label宽
      sectorLabelWidth: '', //选择部门label宽
      fields:'',
      defaultCorporateVal: undefined, //默认公司值
    },
  }
)
const setDefaultCorporateVal = ()=>{
  console.log(props,"props.configCascader.defaultCorporateVal");
  
  if(props.configCascader.defaultCorporateVal){
    pageData.corporateId = props.configCascader.defaultCorporateVal
  }
}
// const { cascaderShow } = toRefs(props.configCascader)
//这种写法模板拿得到，但是在函数中拿不到
// defineProps({
//   configCascader: {
//     type: Object,
//     default: {
//       corporateWidth: '200px', //公司宽度
//       sectorWidth: '200px', //部门宽度
//       corporateRquired: true, //公司是否必填
//       sectorRquired: true, //部门是否必填
//       size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
//       corporateName: '采购公司', //公司label
//       sectorName: '采购部门', //部门label
//       cascaderShow: '', //选择框不显示配置默认为空，sector|corporate，当前需求展示只支持部门不显示
//     },
//   },
// })
const emits = defineEmits(['changeCascader'])
let pageData = reactive<{
  sectorId: string | Number
  corporateId: string | Number
  sectorList: []
  corporateList: []
  corporateLoading: boolean
  sectorLoading: boolean
  corporateLabel: string
  sectorLabel: string
}>({
  sectorId: '', //部门id
  corporateId: '', //公司id
  sectorList: reactive([]), //部门数据
  corporateList: reactive([]), //公司数据
  corporateLoading: false, //公司加载动画
  sectorLoading: false, //部门加载动画
  corporateLabel: '', //公司选中label
  sectorLabel: '', //部门选中label
})
const corporateRef = ref<any>()
const sectorRef = ref<any>()
onMounted(async () => {
  setDefaultCorporateVal()
  await getCorporateList()
  getSectorList(pageData.corporateId)
  nextTick(() => {
    emits('changeCascader', pageData)
  })
})
// 获取公司列表
const getCorporateList = async () => {
  try {
    pageData.corporateLoading = true
    const res = await post({ url: 'org/baCompany/getTreeCompanyByUser' })
    if (res.code == 200) {
      pageData.corporateList = res.data
      if (res.data.length == 1 && !res.data[0].children) {
        pageData.corporateId = res.data[0].value
        pageData.corporateLabel = res.data[0].label
      }
      return
    }
    Message.error(res.message)
  } catch (error: any) {
    pageData.corporateLoading = false
  } finally {
    pageData.corporateLoading = false
  }
}
// 获取部门列表
const getSectorList = async (val: any | number) => {
  try {
    pageData.sectorLoading = true
    const res = await post({ url: `org/baCompany/getDepartmentTree?companyId=${val} ` })
    if (res.code == 200) {
      pageData.sectorList = res.data
      return
    }
    Message.error(res.message)
  } catch (error: any) {
    pageData.sectorLoading = false
  } finally {
    pageData.sectorLoading = false
  }
}
//公司change事件
const corporateChange = (event: any) => {
  console.log(props)
  if (!props.configCascader.cascaderShow || props.configCascader.cascaderShow == '') {
    getSectorList(event)
  }
  nextTick(() => {
    if (corporateRef.value.selectViewValue.length == 0) {
      pageData.corporateId = ''
      pageData.corporateLabel = ''
      pageData.sectorId = ''
      pageData.sectorLabel = ''
      pageData.sectorList = []
      emits('changeCascader', pageData)
      return
    }
    pageData.sectorId = ''
    pageData.corporateLabel = slicing(corporateRef.value.selectViewValue[0].label)
    emits('changeCascader', pageData)
  })
}
//部门change事件
const sectorChange = (event: any) => {
  nextTick(() => {
    if (sectorRef.value.selectViewValue.length == 0) {
      pageData.sectorId = ''
      pageData.sectorLabel = ''
      emits('changeCascader', pageData)
      return
    }
    pageData.sectorLabel = slicing(sectorRef.value.selectViewValue[0].label)
    emits('changeCascader', pageData)
  })
}
//重置
let _form = toRaw({ ...pageData })
const resetForm = () => {
  // pageData = { ..._form }
  // pageData.corporateList = []
  //妈的有问题，里面的数组赋值了不显示，妈的
  pageData.sectorId = '' //部门id
  pageData.corporateId = '' //公司id
  pageData.sectorList = [] //部门数据
  pageData.corporateLabel = '' //公司选中label
  pageData.sectorLabel = '' //部门选中label
}
//父组件传参
interface obj {
  sectorId: ''
  corporateId: ''
  corporateLabel: ''
  sectorLabel: ''
}
const parentComponent = (data: obj) => {
  const { sectorId, corporateId, corporateLabel, sectorLabel } = data
  pageData.sectorId = sectorId
  pageData.corporateId = corporateId
  pageData.corporateLabel = corporateLabel
  pageData.sectorLabel = sectorLabel
  getSectorList(corporateId)
}
const corporateDisabled = ref(false)
const setcorDisabled = (data: boolean) => {
  corporateDisabled.value = data
}
// 对外暴露的属性
defineExpose({
  resetForm,
  parentComponent,
  setcorDisabled,
})
</script>
